<template>
    <div class="compile">
      <div class="content">
        <div class="title">
          <h4>修改信息</h4>
        </div>
        <div class="nickname"> <!-- 昵称区-->
            <div class="row">
                <span>昵称 :</span>
            </div>
            <input type="text" v-model="userInfo.nickname">
        </div>
  
        <div class="head">
          <div class="row">
            <span>头像 :</span>
          </div> 
          <img src="../../assets/img/头像.png" alt="">
        </div>
  
        <div class="sex">
          <div class="row">
            <span>性别 :</span>
          </div>
          <input type="radio" v-model="userInfo.sex" id="man" name="sex" value="1" class="ses" ><label for="man">男</label>
          <input type="radio" v-model="userInfo.sex" id="women" name="sex" value="0" class="ses"><label for="women">女</label>
        </div>
        <div class="introduce">
          <div class="row">
            <span>简介 :</span>
          </div>
      <textarea name="" id="" cols="30" rows="10"  v-model="userInfo.brief"></textarea>
        </div>
        <div class="phone">
          <div class="row">
            <span>手机 :</span>
          </div>
          <input type="text" v-model="userInfo.phoneNumber">
        </div>
        <div class="email">
          <div class="row">
            <span>邮箱 :</span>
          </div>
          <input type="text" id="email"  v-model="userInfo.email" @blur="compare(userInfo.email)">
            <small class="error-message"></small>
        </div>
        <div class="birthday">
          <div class="row">
            <span>生日 :</span>
          </div>
          <el-date-picker
            v-model="userInfo.birthday"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </div>
  
        <div class="addres">
          <div class="row">
            <span>住址：</span>
          </div>
          <input type="text" v-model="userInfo.location">
        </div>
  
        <div class="school">
          <div class="row">
            <span>学校 :</span>
          </div>
          <input type="text" v-model="userInfo.school">
        </div>
  
        <div class="education">
          <div class="row">
            <span>学历 :</span>
          </div>
          <input type="text" v-model="userInfo.education">
        </div>
        
        <div class="graduateYear">
          <div class="row">
            <span>毕业时间 :</span>
          </div>
          <input type="text" v-model="userInfo.graduateYear">
        </div>
  
        <div class="company">
          <div class="row">
            <span>公司 :</span>
          </div>
          <input type="text" v-model="userInfo.company">
        </div>
        <div class="position">
          <div class="row">
            <span>职位 :</span>
          </div>
          <input type="text" v-model="userInfo.position">
        </div>
        
        <div class="workYear">
          <div class="row">
            <span> 工作年限 :</span>
          </div>
          <input type="text" v-model="userInfo.workYear">
        </div>
        
        <div class="btn" @click="upload">
          <el-button type="primary" class="btn1">上传<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>
        
      
      </div>
      </div>
  
  
      
  </template>
  
  <script>
  
  import { Message } from 'element-ui';
  import instance from '../../utils/request';
  export default {
  name:"Edit",
  data() {
    return {
      userInfo:{
        nickname:'康康',
        sex:'1',
        phoneNumber:'12345678911',
        brief:'小鸭子',
        email:'442935147@qq.com',
        birthday:'2023/11/03',
        location:'西安文理学院',
        school:'西安文理学院',
        education:'本科2',
        graduateYear:'2025/6/1',
        company:'431',
        position:'程序员',
        workYear:'2年',
  
      },
    
  
      pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
      
          },
  
  
      
    }
  
  
  },
  methods:{
   // 对邮箱格式的校验
    compare(email){
      const control=document.querySelector('.email')
      const errorMessage=document.querySelector('.error-message')
      const emailReg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if(emailReg.test(email)){
        control.classList.remove('error')
        errorMessage.textContent=''
      }
      else{
        control.classList.add('error')
        errorMessage.textContent='这不是有效的email'
        Message.error('请输入正确的邮箱')
      }
    },
  
    upload(){
      instance.post('/user/info',this.userInfo).then(success=>{
        if(success.data.code==1000){
          Message.success('上传成功')
        }
      }).catch(error=>{
        Message.error('上传失败')
        console.log(error)
      })
  
    }
  
    
  
  }
  }
  </script>
  
  <style scoped>
  .email.error input{
    border-color: red;
  }
  .btn{
    width: 120px;
    height: 40px;
    margin: 50px auto;
  }
  .btn1{
    width: 120px;
    height: 40px;
  }
  *{
   margin: 0 ;
   padding:0;
  }
  .row{
    width: 200px;
    margin-left: 20px ;
  }
  .content{
    margin: 30px auto;
    width: 70%;
    height: 1500px;
    background-color: rgba(250,250,250,0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  
  }
  .title{
    padding: 20px;
    width: 100%;
    height: 60px;
    margin-top: 20px ;
    border-bottom: 1px solid rgba(202, 200, 200, 0.3);
  }
  
  .nickname{
    line-height: 40px;
    height: 40px;
    margin-top: 40px;
    display: flex;
    justify-content: left;
  
  }
  input{
    font-size: 16px;
    padding: 0 10px;
    width: 80%;
    border:1px solid rgba(202, 200, 200, 0.5); 
   
  }
  
  input:hover{
    border: 1px solid skyblue;
  }
  input:focus{
    outline: 1px solid skyblue;
    box-shadow: 0 1px ;
  }
  
  .head{
    margin-top: 30px;
    display: flex;
   
  }
  
  img{
    width: 120px;
    height: 120px;
  }
  .sex{
    margin-top: 30px;
    display: flex;
  }
  
  .ses{
    width: 20px;
    font-size: 16px;
    margin-left: 20px;
    cursor: pointer;
  
  }
  
  label{
    margin-left: 10px;
    cursor: pointer;
  }
  
  .introduce{
    margin-top: 30px;
    display: flex;
    height: 100px;
    line-height: 50px;
  }
   textarea{
   color:black;
    font-size: 16px;
    padding: 10px 10px;
    width: 80%;
    border:1px solid rgba(202, 200, 200, 0.5); 
   height: 100px;
  } */
  
  textarea:hover{
    
    border: 1px solid skyblue;
    
  }
  
  textarea:focus{
    outline:1px solid skyblue;
    box-shadow: 0 1px ;
  }
  
  .phone{
    margin-top: 30px;
    display: flex;
    height: 40px;
    line-height: 40px;
  }
  .email{
    margin-top: 30px;
    display: flex;
    height: 40px;
    line-height: 40px;
    position: relative;
    
  }
  .error-message{
    font-size: 16px;
    color: #e74c3c;
    position: absolute;
    bottom: -30px;
    left:220px ;
  
  }
  .birthday{
    margin-top: 30px;
    display: flex;
    height: 40px;
    line-height: 40px;
  }
  .addres{
    margin-top: 30px;
    display: flex;
    height: 40px;
    line-height: 40px;
  }
  
  .school{
    margin-top: 30px;
    display: flex;
    height: 40px;
    line-height: 40px;
  }
  
  .education{
    margin-top: 30px;
    display: flex;
    height: 40px;
    line-height: 40px;
  }
  .graduateYear{
    margin-top: 30px;
    display: flex;
    height: 40px;
    line-height: 40px;
  }
  .company{
    margin-top: 30px;
    display: flex;
    height: 40px;
    line-height: 40px;
  }
  .position{
    margin-top: 30px;
    display: flex;
    height: 40px;
    line-height: 40px;
  }
  .workYear{
    margin-top: 30px;
    display: flex;
    height: 40px;
    line-height: 40px;
  }
  
  </style>